<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://shiro.apache.org/tags" prefix="s"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>${webName}-后台管理系统</title>
<link rel="stylesheet" href="${res}/layui/css/layui.css">
<link rel="stylesheet"
	href="${res}/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="${res}/story/css/admin.css">
</head>
<body style="">
	<div style="padding: 10px;">
		<div class="layui-btn-group">
			<button id="addAdmin" class="layui-btn layui-btn-small" style="background-color:#800080;">
				<i class="layui-icon">&#xe61f;</i>&nbsp;添加
			</button>
			<button id="delAdmin" class="layui-btn layui-btn-small layui-btn-danger">
				<i class="layui-icon">&#xe640;</i>&nbsp;删除
			</button>
			<button class="layui-btn layui-btn-small layui-btn-normal">
				<i class="layui-icon">&#xe681;</i>&nbsp;导入
			</button>
			<button class="layui-btn layui-btn-small">
				<i class="layui-icon">&#xe601;</i>&nbsp;导出
			</button>
		</div>
		<table id="adminIndex" lay-filter="adminIndex" style="margin: 0;">
		</table>
	</div>

	<script src="${res}/layui/layui.js"></script>
	<script>
		layui.use([ 'element', 'table','layer','form'], function() {
			var _this = this;
			var element = layui.element;
			var $ = layui.$;
			var layer = layui.layer;
			var table = layui.table;
			var form = layui.form;
			var iframeWidth = $(parent.document).find('.layui-tab-content').width();
			//var tableWidth = $(document).find('.layui-tab-content').width();
			//var tableHeight = $(document).find('.layui-tab-content').height();
			//执行渲染
			function verifyUsername(value){
				 if(/^[A-Za-z][A-Za-z1-9_-]{5,14}$/.test(value)){					 
					 return true;			     
				 }else{
					 parent.layer.msg('用户名必须是以字母开头的15位字母和数字！',{	
							icon:2,												
							offset: '50px',
							anim: 6
							
						});
					 return false;
				 }
			}			
			table.render({		
				id:'adminTable',
				elem : '#adminIndex', //指定原始表格元素选择器（推荐id选择器）		
				url : '${base}/manager/admin/page/show',
				width:'1000px',
				height:'full-50',
				
				cols : [ [ {
					checkbox : true,
					LAY_CHECKED : false
				},{
					field : 'aid',
					title : 'ID',
					width : 300,
					align : 'center'					
				}, {
					field : 'username',
					title : '用户名',
					width : 120,
					align : 'center'
				}, {
					field : 'createTime',
					title : '注册时间',
					width : 160,
					align : 'center',
					sort:true
				},{
					field : 'createIp',
					title : '注册IP',
					width : 130,
					align : 'center'
				},{
					field : 'accountStatus',
					title : '账号状态',
					width : 60,
					align : 'center',
					templet : '#accountStatusTpl1'
				},{
					field : 'level',
					title : '级别',
					width : 60,
					align : 'center',
				},{
					fixed : 'right',
					title : '操作',
					width : 200,
					align : 'center',
					toolbar : '#toolbar'
				} ] ], //设置表头
				
				
				page : true,		
				limits : [ 20, 50, 100, 200 ],
				limit : 20,
				request : {
					pageName : 'pageNum' //页码的参数名称，默认：page
					,
					limitName : 'pageSize' //每页数据量的参数名，默认：limit
				},
				skin : 'row',
				even : true,
			});

			table.on('tool(adminIndex)', function(obj) {
				var data = obj.data;
				var layEvent = obj.event;
				var tr = obj.tr;
				var aid = data.aid;
				if (layEvent === 'show') {
					var url = '${base}/user/' + aid + '/show';
					parent.layer.open({
						type : 2,
						title : '查看用户详情',
						content : [ url, 'no' ],
						area : [ '400px', '440px' ]

					});
				} else if (layEvent === 'edit') {

				} else if (layEvent === 'del') {
					parent.layer.confirm('真的要删除该行数据吗？', function(index) {	
						parent.layer.close(index);
						$.ajax({
							url:'${base}/manager/admin/'+aid+'/delete',
							success:function(res,status,xhr){
								var sessionStatus = xhr.getResponseHeader("sessionStatus"); 
								if(sessionStatus == '401'){
									parent.layer.msg('登录超时！请重新登录...',{	
										icon:2,												
										offset: '50px',
										anim: 6,
									},function(index){
										parent.layer.close(index);
										parent.window.location.href='${base}/manager/login'								
									});
									return;
								}
								console.info(status);
								if(status == 'success'){				
									var resObj = JSON.parse(res);
									if(resObj.status==0){
										obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
										parent.layer.msg(resObj.msg,{	
											icon:1,												
											offset: '50px',
											anim: 2,
											time:2000
										});										
									}else{
										parent.layer.msg(resObj.msg,{	
											icon:2,												
											offset: '50px',
											anim: 6,
											time:2000
										});
									}
								}
							}
						});			
					});
				} else if (layEvent === 'change') {

				} else {

				}
			});
			table.on('sort(adminIndex)',function(obj){
				console.info(obj.field);
				console.log(obj.type);
				console.log(this);
			});
			
			$('#addAdmin').on('click',function(){
						 parent.layer.open({
						 type : 2,
						 title : '添加管理员',
						 content : '${base}/manager/admin/page/add',
						 area : [ '400px', '450px' ],
						 anim: 4,
						 btn:'添加',
						 btnAlign: 'c',
						 yes:function(index,layero){
							var body = parent.layer.getChildFrame('body', index);
							//var iframeWin = window[layero.find('iframe')[0]['name']];
						   //var usernameId = body.find('input[name=username]').attr('id');
						   var username =  body.find('input[name=username]').val();
						   if(verifyUsername(username)){
							   $.ajax({
									url:'${base}/manager/admin/add',
									type:'post',
									data:body.find('form').serialize(),
									beforeSend:function(){
										parent.layer.load(2);
									},
									success:function(result){
										console.info(result);
										var res = $.parseJSON(result);							
										if(res&&res.status==0){
											parent.layer.closeAll('loading');
											parent.layer.msg('添加成功!',{	
												icon:1,												
												offset: '50px'
											});
											parent.layer.closeAll('page');
										}else{
											parent.layer.closeAll('loading');
											parent.layer.msg(res.msg,{	
												icon:2,																				
												offset: '50px'
											});									
										}
									}
									
								});			
						   }						  									
							}
						});					   
			});
		//批量删除
		$('#delAdmin').on('click',function(){
			var checkStatus = table.checkStatus('adminTable');
			if(checkStatus.data.length === 0){
				parent.layer.msg('请选择您要操作的数据!',{	
					icon:2,												
					offset: '50px'
				});
				return;
			}
			console.log(checkStatus.data.length);
		});
		});
	</script>
	<script type="text/html" id="accountStatusTpl1">
  {{#  if(d.accountStatus === true){ }}
  <span class="story-status-yes">正常</span>
  {{#  } else { }}
    <span class="story-status-no">冻结</span>
  {{#  } }}
</script>

	<script type="text/html" id="toolbar">
<div class="layui-btn-group">
  <a class="layui-btn layui-btn-mini" lay-event="show" style="background-color:#32CD32;">查看</a>
  <a class="layui-btn layui-btn-mini layui-btn-warm" lay-event="edit" style="background-color:#7B68EE;">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>  
  <!-- 这里同样支持 laytpl 语法，如： -->
  {{#  if(d.status == true){ }}
    <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="change">锁定</a>
  {{#  }else{ }}
	<a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="change">解锁</a>
  {{# } }}
</div>
</script>


</body>
</html>